<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客登录页</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .card-hover {
                @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
            }
        }
    </style>
</head>

<body class="bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen font-sans text-dark">
<!-- 导航栏 -->
<nav class="bg-white/80 backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50 transition-custom">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-3">
            <img src="pic/logo2.jpg" alt="博客系统logo" class="h-10 w-10 rounded-full object-cover shadow-md transform hover:scale-105 transition-custom">
            <span class="blog-title text-xl font-bold text-primary text-shadow">我的博客系统</span>
        </div>

        <div class="hidden md:flex items-center space-x-6">
            <a href="blog_list.html" class="nav-span text-slate-600 hover:text-primary transition-custom flex items-center gap-1.5">
                <i class="fa fa-home"></i> 主页
            </a>
            <a href="blog_edit.html" class="nav-span text-slate-600 hover:text-primary transition-custom flex items-center gap-1.5">
                <i class="fa fa-pencil"></i> 写博客
            </a>
        </div>

        <!-- 移动端菜单按钮 -->
        <button class="md:hidden text-slate-600 hover:text-primary transition-custom">
            <i class="fa fa-bars text-xl"></i>
        </button>
    </div>
</nav>

<!-- 主内容区 -->
<div class="container mx-auto px-4 pt-28 pb-16">
    <div class="max-w-md mx-auto">
        <!-- 登录卡片 -->
        <div class="login-dialog bg-white rounded-2xl shadow-md overflow-hidden card-hover">
            <!-- 卡片头部 -->
            <div class="bg-primary/90 p-6 text-center relative overflow-hidden">
                <div class="absolute inset-0 opacity-10">
                    <i class="fa fa-user-circle absolute text-[150px] -top-20 -right-20"></i>
                </div>
                <h3 class="text-[clamp(1.5rem,3vw,1.8rem)] font-bold text-white relative z-10">欢迎回来</h3>
                <p class="text-white/80 mt-1 relative z-10">请登录您的账号继续使用</p>
            </div>

            <!-- 表单区域 -->
            <div class="p-6 space-y-5">
                <!-- 用户名输入 -->
                <div class="row relative">
                    <div class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
                        <i class="fa fa-user"></i>
                    </div>
                    <input type="text" name="username" id="username"
                           class="w-full pl-10 pr-4 py-3 rounded-lg border border-slate-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-custom placeholder:text-slate-300"
                           placeholder="请输入用户名">
                </div>

                <!-- 密码输入 -->
                <div class="row relative">
                    <div class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
                        <i class="fa fa-lock"></i>
                    </div>
                    <input type="password" name="password" id="password"
                           class="w-full pl-10 pr-4 py-3 rounded-lg border border-slate-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-custom placeholder:text-slate-300"
                           placeholder="请输入密码">
                </div>

                <!-- 提交按钮 -->
                <div class="row pt-2">
                    <button id="submit" onclick="login()"
                            class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom flex items-center justify-center gap-2 group">
                        <span>登录</span>
                        <i class="fa fa-arrow-right transform group-hover:translate-x-1 transition-transform"></i>
                    </button>
                </div>


            </div>
        </div>

        <!-- 装饰元素 -->
        <div class="absolute -bottom-10 -left-10 w-40 h-40 bg-secondary/10 rounded-full blur-3xl"></div>
        <div class="absolute -top-20 -right-10 w-60 h-60 bg-primary/10 rounded-full blur-3xl"></div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script>
    // 登录功能保持不变
    function login() {
        // 添加加载状态
        const submitBtn = document.getElementById('submit');
        const originalContent = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 登录中...';

        $.ajax({
            type: "post",
            url: "/user/login",
            contentType: "application/json",
            data: JSON.stringify({
                "userName": $("#username").val(),
                "password": $("#password").val()
            }),
            success: function(result){
                if(result.code === 200 && result.data != null){
                    // 登录成功动画
                    submitBtn.innerHTML = '<i class="fa fa-check"></i> 登录成功';
                    submitBtn.classList.remove('bg-primary');
                    submitBtn.classList.add('bg-secondary');

                    localStorage.setItem("loginUserId", result.data.userId);
                    localStorage.setItem("token", result.data.token);

                    // 延迟跳转，展示成功状态
                    setTimeout(() => {
                        location.assign("blog_list.html");
                    }, 800);
                } else if(result.code === -1){
                    // 登录失败提示
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalContent;

                    // 显示错误动画
                    const usernameInput = document.getElementById('username');
                    const passwordInput = document.getElementById('password');
                    [usernameInput, passwordInput].forEach(input => {
                        input.classList.add('border-red-500');
                        input.classList.add('animate-shake');
                        setTimeout(() => {
                            input.classList.remove('animate-shake');
                        }, 600);
                    });

                    alert(result.errMsg);
                }
            },
            error: function() {
                // 网络错误处理
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalContent;
                alert('网络错误，请稍后重试');
            }
        });
    }

    // 添加键盘事件，按Enter登录
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            login();
        }
    });

    // 添加页面滚动效果
    window.addEventListener('scroll', function() {
        const nav = document.querySelector('nav');
        if (window.scrollY > 10) {
            nav.classList.add('py-2', 'shadow');
            nav.classList.remove('py-3');
        } else {
            nav.classList.add('py-3');
            nav.classList.remove('py-2', 'shadow');
        }
    });
</script>
</body>

</html>
